<template>
	<view class="user_info">
		<view class="cell_box">
			<view class="cell no_border" @click="showAlert = true">
				<!-- <view class="cell_right"> -->
					<x-image :defaultImage="require('@/static/avatar.png')" :src="userInfo.avatarUrl" class="x-image"></x-image>
					<view class="user_name">{{userInfo.nickName}}</view>
				<!-- </view> -->
				<view class="cell_right">
					<view class="placeholder" >更新头像和昵称</view>
					<u-icon name="arrow-right" size="18"></u-icon>
				</view>
			</view>
		</view>
		
		<u-popup :show="showAlert"  mode="bottom" round="5">
            <view class="alert">
               <view class="user_name">获取您的昵称、头像</view>
			   <view class="alert_text">获取您的昵称、头像，主要用于向用户提供具有辨识度的用户中心界面</view>
			   
			   <view class="cell_box">
			   	<view class="cell">
			   		<view class="label">头像</view>
			   		<view class="cell_right" >
			   			<button open-type="chooseAvatar"  class="btn_avatar" @chooseavatar="onChoose">
							<x-image :defaultImage="require('@/static/avatar.png')" :src="userInfo.avatarUrl" class="x-image"></x-image>
			   			</button>
			   			<u-icon name="arrow-right" size="18"></u-icon>
			   		</view>
			   	</view>
			   	<view class="cell no_border">
			   		<view class="label">昵称</view>
			   		<view class="cell_right" >
			   			<input type="nickname" @blur="onBlurNickName" placeholder="请输入昵称" v-model="userInfo.nickName" class="cell_input"/>
			   			<u-icon name="arrow-right" size="18"></u-icon>
			   		</view>
			   	</view>
			   </view>
			   <view class="ic_close" @click="showAlert = false"><u-icon name="close-circle" size="28"></u-icon></view>
			  
			   <button class="btn_enter x-btn" @click="showAlert = false">确认</button>
            </view>
		</u-popup>
		<view class="cell_box">
			<view class="cell">
				<view class="label">姓名</view>
				<view class="cell_right">
					<input type="text" placeholder="请输入姓名" v-model="userInfo.name" class="cell_input"/>
				</view>
			</view>
			<view class="cell">
				<view class="label">绑定手机</view>
				<view class="cell_right">
					<input type="number" placeholder="请输入手机号" maxlength="11" @input="onInputPhone" :value="userInfo.mobile" class="cell_input" />
				</view>
			</view>
			<view class="cell">
				<view class="label">性别</view>
				<view class="cell_right"  @click="selectSex">
					<view class="placeholder" v-if="!userInfo.sex" @click="selectSex">请选择性别</view>
					<view @click="selectSex" v-else>{{userInfo.sexValue}}</view>
					<u-icon name="arrow-right" size="18"></u-icon>
				</view>
			</view>
			<view class="cell no_border">
				<view class="label">所在地</view>
				<view class="cell_right">
					<picker mode="region" @change="selectRegion">
						<view class="placeholder" v-if="!userInfo.locationId">请选择所在地</view>
						<view v-else>{{userInfo.locationId}}</view>
					</picker>
					<u-icon name="arrow-right" size="18"></u-icon>
				</view>
			</view>
		</view>
		<view class="cell_box">
			<navigator class="cell" hover-class="none" url="/pages/mine/invoice/invoice">
				<view class="label">发票抬头管理</view>
				<view class="cell_right">
					<u-icon name="arrow-right" size="18"></u-icon>
				</view>
			</navigator>
		</view>
		<x-footer>
			<button @click="onSave" class="btn_save x-btn">保存</button>
		</x-footer>
		
	</view>
</template>

<script>  
import config from "@/config";
import { deleteById as deleteFile} from "@/api/file.js";
import {updateClientInfo} from '@/api/mine.js'
import {mapState} from 'vuex'
import XImage from '@/components/image/xImage.vue'

export default {
	components:{
		XImage
	},
	computed:{
		...mapState(['device'])
	},
	data() {
		return {
			showAlert:false,
			imageUrl: config.imageUrl,//
			userInfo: {
				sexValue:'',
				region:'',
				mobile:'',
				name:'',
				locationId:''
			},
			baseUrl: config.baseApi,
		};
	},
	onPageScroll(e) {
		this.scrollTop = e.scrollTop;
	},
	onLoad(option) {
		this.userInfo = this.$store.state.userInfo;
		this.userInfo.sexValue = this.userInfo.sex == 1?'男':'女'
	},
	methods: {
		onInputPhone(e) {
			this.userInfo.mobile = e.target.value
		},
		selectSex(e){
			const sex = ['男','女']
			uni.showActionSheet({
				itemList:sex,
				success:res=>{
					console.log(res)
					this.userInfo.sexValue = sex[res.tapIndex]
					this.userInfo.sex = res.tapIndex+1
					console.log(this.userInfo)
				},
				complete:c=>{
					console.log('ccc',c)
				}
			})
		},
		selectRegion(e){
			console.log(e.detail.value)
			this.userInfo.locationId = e.detail.value[0]+','+e.detail.value[1]+','+e.detail.value[2]
		},
		onBlurNickName(e){
			this.userInfo.nickName = e.detail.value;
		},
		onChoose(e){
			const path = e.detail.avatarUrl;
			uni.uploadFile({
				url: this.baseUrl+"applet/file/uploadImg",
				filePath: path,
				header:{
					"content-type":'multipart/form-data',
					"token": uni.getStorageSync('token')
				},
				name: 'file',
				formData: {
				},
				success: res => {
					const data = JSON.parse(res.data);
					this.userInfo.avatarUrl = this.imageUrl+data.data.path 
					this.$forceUpdate();
				}
			});
		},
		// 增加地址
		onSave() {
			if(!this.$TOOLS.VALIDATE.testPhone(this.userInfo.mobile) && this.userInfo.mobile !==''){
				uni.showToast({
					title: '请填写正确手机号',
					icon: 'none'
				})
				return false
			}
			updateClientInfo(this.userInfo).then(res=>{
				const info = res;
				info.authorization = uni.getStorageSync('token');
					this.$store.dispatch('updateUserInfo',info)
					uni.$u.toast('修改成功');
					uni.switchTab({
						url:'/pages/mine/index'
					})
				
			}).catch(err=>{console.log(err)})
			
		},
		// backspacePhone() {
		// 	this.userInfo.mobile = this.userInfo.mobile.slice(0, -1);
		// },
		// changePhone(e) {
		// 	this.userInfo.mobile += e;
		// },
		//籍贯修改
		// reset() {
		// 	const validateList = ['userInfo.nickName', 'userInfo.mobile'];
		// 	this.$refs.form1.resetFields();
		// 	this.$refs.form1.clearValidate();
		// 	setTimeout(() => {
		// 		this.$refs.form1.clearValidate(validateList);
		// 		// 或者使用 this.$refs.form1.clearValidate()
		// 	}, 10);
		// },
		// hideKeyboard() {
		// 	uni.hideKeyboard();
		// }
	}
};
</script>

<style lang="scss" scoped>
	
	.btn_save{
		width:710rpx;
		border: none;
		border-radius: 72rpx;
		height: 72rpx;
		margin: 100rpx auto;
	}
	
	.alert{
		padding: 40rpx 20rpx 60rpx;
		position: relative;
		
		.ic_close{
			position: absolute;
			top: 20rpx;
			right: 20rpx;
		}
		
		.user_name{
			padding: 0 20rpx;
		}
		
		.alert_text{
			color: #515151;
			font-size: 28rpx;
			margin: 40rpx auto;
			padding: 0 20rpx;
		}
		
		.btn_enter{
			width: 100%;
			height: 90rpx;
			border-radius: 6rpx;
		}
	}
	
	.btn_enter{
		width: 100%;
		height: 90rpx;
		border-radius: 6rpx;
	}
	
	.placeholder{
		color: #808080;
	}
	.user_info{
		width: 100%;
		min-height: 100vh;
		background-color: #f1f1f1;
		padding-top: 20rpx;
	}
	.x-image{
		width: 120rpx;
		height: 120rpx;
		// margin: 16rpx;
		border-radius: 100%;
		// background-color: #ccc;
	}
	.user_name{
		margin-left: 10rpx;
		font-weight: 600;
		font-size: 34rpx;
	}
	.cell_box{
		width: 710rpx;
		background-color: #fff;
		margin:0 auto 20rpx;
		padding: 0 20rpx;
		border-radius: 10rpx ;
		overflow: hidden;
		
		.cell{
			padding: 30rpx 0;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 1rpx solid #f1f1f1;
			font-size: 30rpx;
			
			
			
			.cell_right{
				display: flex;
				align-items: center;
				text-align: right;
				// min-width: 200rpx;
				justify-content: flex-end;
				flex: 1;
				
				.cell_input{
					margin-right: 10rpx;
				}
			}
		}
	}
	
	.no_border{
		border:none !important;
	}
	.container {
		padding: 2px 32rpx 0;
		.login-title {
			display: block;
			font-size: 18px;
			font-weight: 500;
			color: $u-main-color;
			line-height: 1.2;
		}

		.login-desc {
			font-size: 14px;
			color: $u-tips-color;
			line-height: 1.1;
		}

		.login-form {
			margin: 0px 0 18px;
		}
	}
	.btn_avatar{
		width: 80rpx;
		height: 80rpx;
		
		.x-image{
			width: 100%;
			height: 100%;
		}
	}
	.footer {
		position: fixed;
		border-top: 1px solid #AAA;
		width:100%;
		display: flex;
		align-items: center;
		justify-content: center;
		padding-top: 8px;
	}

</style>
